<template>
  <div>
    <!-- 标题 -->
    <h1>排行</h1>
    <!-- 搜索框，绑定输入值到searchQuery变量，并在输入时调用filterRankings方法 -->
    <input v-model="searchQuery" placeholder="搜索排名..." @input="filterRankings" />
    <!-- 刷新按钮，点击时调用refreshRankings方法 -->
    <button @click="refreshRankings">刷新</button>
    <!-- 列表显示排名数据，使用v-for指令遍历filteredRankings数组 -->
    <ul>
      <li v-for="(rank, index) in (filteredRankings || []).slice(0, 5)" :key="index">
        <!-- 点击排名项时调用gotoProduct方法，传递排名项的id和type -->
        <span @click="gotoProduct(rank.id, rank.type)">{{ rank.name }}：{{ rank.time }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
// 假设这是你的排名数据数组
const shijian = ref([]);
// 用于存储用户在搜索框中输入的查询字符串
const searchQuery = ref('');
// 用于存储过滤后的排名数据
const filteredRankings = ref([]);

// 跳转到产品详情页面的方法
const gotoProduct = (id, type) => {
  router.push({
    name: 'purchase',
    query: { id: id, type }
  });
};

// 计算距离下一个凌晨的时间间隔
const getTimeUntilMidnight = () => {
  const now = new Date();
  const midnight = new Date(now);
  midnight.setHours(24, 0, 0, 0); // 设置为第二天的凌晨
  return midnight - now;
};

// 清除排名数据的函数
const clearRankingData = () => {
  shijian.value = []; // 清空排名数据
  setTimeout(clearRankingData, getTimeUntilMidnight()); // 重新设置定时器
};

// 过滤排名数据的方法
const filterRankings = () => {
  filteredRankings.value = shijian.value.filter(rank => rank.name.includes(searchQuery.value));
};

// 刷新排名数据的方法
const refreshRankings = () => {
  // 这里应该调用API或其他方法来获取最新的排名数据
  shijian.value = fetchNewRankings(); // 假设fetchNewRankings是一个获取最新排名数据的函数
  filterRankings();
};

// 插入签到时间到排名数据的方法
const insertSignInTime = (signInTime) => {
  shijian.value.push({ name: '新签到', time: signInTime, id: 'new', type: 'signin' });
  filterRankings();
};

onMounted(() => {
  setTimeout(clearRankingData, getTimeUntilMidnight()); // 页面加载时设置定时器
  refreshRankings(); // 初始加载时刷新排名数据
  
  // 从查询参数中获取签到时间并插入排名数据
  const signInTime = route.query.signInTime;
  if (signInTime) {
    insertSignInTime(signInTime);
  }
});
</script>

<style scoped>
ul {
  list-style-type: none; /* 移除列表项前的默认标记 */
}
</style>
